<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" href="">
    <title>Scale</title>
    <style type="text/css">
        body {
            background-color: #eccc68;
        }

        canvas {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <h1>Scale</h1>
    <script type="module">
        // import * as TWO from './two.js'
        import { Scene, Render, Circle, Text, PickContrls, Vector2 } from './two/two.js'
        import { line, stroke } from './spring/board.js'
        // import Point from './two.js'
        // import Render from './two.js'
        const LOG = 0
        const width = 400, height = 300, edge = 60

        let render = new Render()
        render.setSize(width, height)
        render.setPixelRatio(2)
        // render.setTickLength(1000 / 10)
        render.setAnimationLoop(animation)
        document.querySelector('body').appendChild(render.domElement)

        const scene = new Scene()

        const controls = new PickContrls(scene, render.domElement)
        controls.setPixelRatio(2)


        class Spring {
            constructor(a, b, restLength = 100, k = 0.01) {
                this.a = a
                this.b = b
                this.restLength = restLength
                this.k = k
            }
            setRender(render) {
                this.render = render
            }
            update() {
                let force = this.b.position.clone().sub(this.a.position)
                let x = force.length - this.restLength
                this.b.velocity.add(force.normalize().mul(-this.k * x)).mul(0.99)
                this.a.velocity.add(force.mul(-1)).mul(0.99)
            }
            applyForce(force) {
                this.b.velocity.add(force.clone()).mul(0.99)
                this.a.velocity.add(force.clone()).mul(0.99)
            }
            show() {
                if (!this.render) return
                this.render.line(this.a.position.x, this.a.position.y, this.b.position.x, this.b.position.y)
                this.render.stroke()
                // line(this.a.position.x, this.a.position.y, this.b.position.x, this.b.position.y)
            }
        }

        let circles = [], springs = []
        let spacing = 150
        let n = 4
        for (let i = 0; i < n; ++i) {
            let c1 = new Circle(i < 2 ? 200 : 300, 20 + i * spacing, 5, 20)
            scene.add(c1)
            circles.push(c1)
            if (i >= 1) {
                let spring = new Spring(circles[i - 1], c1, spacing)
                spring.setRender(render)
                springs.push(spring)
            }
        }
        /*
        for (let i = n / 2; i < n; ++i) {
            let spring = new Spring(circles[n - 1 - i], circles[i], spacing)
            spring.setRender(render)
            springs.push(spring)
            spring = new Spring(circles[i - n / 2], circles[i], spacing * 1)
            spring.setRender(render)
            springs.push(spring)
        }
        let spring = new Spring(circles[0], circles[circles.length - 1], spacing)
        spring.setRender(render)
        */
        // springs.push(spring)
        circles[0].islocked = true

        let gravity = new Vector2(0, 0.1)

        function animation() {
            render.render(scene)
            springs.forEach(spring => {
                spring.update()
                spring.show()
                // spring.applyForce(gravity)
            })
            circles.forEach(circle => {
                circle.velocity.add(gravity)
            })
        }

    </script>
</body>

</html>